<template>
  <div v-show="isShow" style="background: linear-gradient(to bottom, white 40%, #d3e2f0 100%);width:100%;height:100%">
    <van-form v-if="visible" @submit="onSubmit" style="height: calc(100% - 20px); overflow-y: auto;">
      <div class="star-title">{{formData.bt||'整治形式主义为基层减负工作调查问卷'}}</div>
      <div v-for="(item, index) in formData.questions" :key="item.id">
        <div v-if="item.describeContent" :class="divClass(item, index)" style="background: white;">
          {{ item.describeContent }}
        </div>
        <van-field
          label-align="top"
          name="radio"
          :label="showLabel(item,index)"
          :rules="item.type === '3' ? [] : [{ required: true, message: '请填写调查' }]"
        >
          <template #input>
            <van-radio-group v-if="item.type === '1'" v-model="item.answer" @change="changeRadio(item)">
              <van-radio v-for="rankItem in item.codeSelect" :key="rankItem" :name="rankItem.value">{{rankItem.label}}</van-radio>
            </van-radio-group>
            <van-checkbox-group v-if="item.type === '2'" v-model="item.answerCheckBox" @change="changeCheckBox(item)" :max="item.limitChecked">
              <van-checkbox shape="square" v-for="rankItem in item.codeSelect" :key="rankItem"  :name="rankItem.value">{{rankItem.label}}</van-checkbox>
            </van-checkbox-group>
            <van-field v-if="item.type === '3'" v-model="item.answerText" rows="2" autosize type="textarea" placeholder="请输入" :rules="[{ required: true, message: '请填写调查' }]"/>
          </template>
        </van-field>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-empty image="error" style="padding-top: 40px" v-else :description="errorMsg" />
    <van-back-top bottom="90px"/>
  </div>
</template>

<script setup>
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { showLoadingToast, closeToast, showSuccessToast, showFailToast } from 'vant'
import { loadQuestion, savePublish } from '@/api/business/questionscommon/publish/PublishForm'
import { QuestionReplyBean } from '@/model/business/questionscommon/publish/PublishFormConstants'

const route = useRoute()
const errorMsg = ref('')
const isShow = ref(false)
const visible = ref(false)
const submitBtn = ref(false)
const firstNum = ref(0)
const isLoad = ref(false)
const showIndex = ref(0)
const formData = ref({ ...QuestionReplyBean })

const showLabel = computed(() => (item, index) => {
  return (index + 1) + '、' + item.question
})

const divClass = computed(() => (item, index) => {
  return item.describeContent.length > 10 ? 'div-left' : 'div-center'
})

const changeCheckBox = (item) => {
  item.answer = item.answerCheckBox.join(',')
  item.answerText = item.codeSelect.filter(ans => item.answerCheckBox.includes(ans.value)).map(an => an.label).join(',')
}

const changeRadio = (item) => {
  item.answerText = item.codeSelect.filter(ans => ans.value === item.answer)[0].label
}

const onSubmit = (values) => {
  const sendData = { ...formData.value }
  console.log(sendData)
  savePublish(sendData).then(() => {
    showSuccessToast('提交成功！')
    router.replace({
      name: 'publishResult'
    })
  }).catch(error => {
    showFailToast(error.message || '提交失败！')
  })
}

onMounted(() => {
  const id = route.query.id

  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: '数据加载中...'
  })
  document.title = '问卷调查'
  loadQuestion(id).then(data => {
    const { result, questionConfig, array, msg } = data
    console.log('1111', data)
    visible.value = result
    if (result) {
      console.log('2222', array)
      formData.value.configId = questionConfig.id
      formData.value.year = questionConfig.year
      formData.value.bt = questionConfig.bt
      formData.value.questions = array.map((item) => {
        const { id, bt, type, showOrder, codeSelect, limitChecked, code, describeContent } = item
        const newItem = {
          configQuestionId: id,
          configId: questionConfig.id,
          answer: '',
          answerText: '',
          question: bt,
          showOrder: showOrder,
          describeContent: describeContent,
          type: type,
          code: code,
          codeSelect: codeSelect,
          limitChecked: limitChecked
        }
        return newItem
      })
      firstNum.value = formData.value.questions.length
      console.log('3333', formData.value)
    } else {
      errorMsg.value = msg
    }
    isShow.value = true
    closeToast()
  }).catch(error => {
    closeToast()
    showFailToast(error.message || '提交失败！')
  })
})
</script>

<style scoped>
.div-center {
  text-align: center;
  font-size: 20px;
}
.div-left {
  margin-left: 10px;
  text-indent: 2em;
}
.van-form {
  padding: 10px 10px 10px 10px
}
.star-title{
  font-size: 22px;
  text-align: center;
  color:#1ea0fa;
  max-width: 280px;
  margin: 5px auto 10px auto;
}
.star-question-title {
  margin: 0;
  padding: 32px 16px 12px;
  color: var(--van-doc-text-color-4);
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
}
.van-radio {
  margin-top: 15px;
}
.van-checkbox{
  margin-top: 15px;
}
.van-form {
  max-width: 980px;
  margin: 0 auto;
}
.van-button--primary {
  max-width: 200px;
  margin: 0 auto;
}
.van-cell {
  font-size: 16px;
  font-family: '微软雅黑';
}
.van-radio-group {
  margin-left: 25px;
}
.van-checkbox {
  margin-left: 25px;
}
</style>
